<template>
    <view class='page'>
        <!-- <z-paging ref="paging" v-model="dataList" @query="getList" :auto-show-back-to-top="true"
                                                                :auto-clean-list-when-reload="false" :auto-scroll-to-top-when-reload="false"> -->
        <view class="banner-view">
            <image style="width: 100%;" :src="Banner" mode="widthFix"></image>
        </view>
       <!-- <view class="subTitle">
            <view>满300减50</view>
        </view>
        <view class="goods-data0" @click="onGoodsList(good1)">
            <view class="goods-list">
                <view class="list-view">
                    <view class="thumb">
                        <image :src="good1.cover" mode="widthFix"></image>
                    </view>
                    <view class="item">
                        <view class="title">
                            <text class="one-omit">{{good1.name}}</text>
                        </view>
                        <view class="commodity-detail">
                            <view>
                                <view class="ret-yuans" v-if="good1.price_market">¥{{good1.price_market}}</view>
                                <view class="commodity-price">￥{{good1.price_selling}}</view>
                            </view>
                            <text class="commodity-count">已售{{good1.stock_virtual}}件</text>
                        </view>
                    </view>
                </view>
                <view class="descript">
                    <text>这个商品很不错很好好好好好好好好好好好，这个商品很不错很好好好好好好好好好好好。</text>
                </view>
            </view>
        </view>
        <view class="goods-data0" @click="onGoodsList(good2)">
            <view class="goods-list">
                <view class="descript0">这个商品很不错很好好好好好好好好好好好</view>
                <view class="list-view">
                    <view class="thumb">
                        <image :src="good2.cover" mode="widthFix"></image>
                    </view>
                    <view class="item">
                        <view class="title">
                            <text class="one-omit">{{good2.name}}</text>
                        </view>
                        <view class="commodity-detail">
                            <view>
                                <view class="ret-yuans" v-if="good2.price_market">¥{{good2.price_market}}</view>
                                <view class="commodity-price">￥{{good2.price_selling}}</view>
                            </view>
                            <text class="commodity-count">已售{{good2.stock_virtual}}件</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="goods-data0" @click="onGoodsList(good3)">
            <view class="goods-list">
                <view class="list-view">
                    <view class="thumb">
                        <image :src="good3.cover" mode="widthFix"></image>
                    </view>
                    <view class="item">
                        <view class="title">
                            <text class="one-omit">{{good3.name}}</text>
                        </view>
                        <view class="commodity-detail">
                            <view>
                                <view class="ret-yuans" v-if="good3.price_market">¥{{good3.price_market}}</view>
                                <view class="commodity-price">￥{{good3.price_selling}}</view>
                            </view>
                            <text class="commodity-count">已售{{good3.stock_virtual}}件</text>
                        </view>
                    </view>
                </view>
                <view class="descript">
                    <view>这个商品很不错很好好好好好好好好好好好</view>
                </view>
            </view>
        </view>
        <view class="goods-data0" @click="onGoodsList(good4)">
            <view class="goods-list">
                <view class="descript0">这个商品很不错很好好好好好好好好好好好</view>
                <view class="list-view">
                    <view class="thumb">
                        <image :src="good4.cover" mode="widthFix"></image>
                    </view>
                    <view class="item">
                        <view class="title">
                            <text class="one-omit">{{good4.name}}</text>
                        </view>
                        <view class="commodity-detail">
                            <view>
                                <view class="ret-yuans" v-if="good4.price_market">¥{{good4.price_market}}</view>
                                <view class="commodity-price">￥{{good4.price_selling}}</view>
                            </view>
                            <text class="commodity-count">已售{{good4.stock_virtual}}件</text>
                        </view>
                    </view>
                </view>
            </view>
        </view> -->
        <view class="goods-data">
            <view class="goods-list">
                <view :class="isList?'list-view' : 'list-li'" v-for="(item,index) in dataList"
                    @click="onGoodsList(item)" :key="index">
                    <view class="thumb">
                        <image :src="item.cover" mode="widthFix"></image>
                    </view>
                    <view class="item">
                        <view class="title">
                            <text class="one-omit">{{item.name}}</text>
                        </view>
                        <view class="commodity-detail">
                            <view>
                                <view class="ret-yuans" v-if="item.price_market">¥{{item.price_market}}</view>
                                <view class="commodity-price">￥{{item.price_selling}}</view>
                            </view>
                            <text class="commodity-count">已售{{item.stock_virtual}}件</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="u-load-more-wrap">
            <u-line color="#d4d4d4" length="50"></u-line>
            <view class="u-load-more-inner">
                <view class="u-line-1">没有更多了</view>
            </view>
            <u-line color="#d4d4d4" length="50"></u-line>
        </view>
        <!-- 联系客服kefu @click="ToChat"-->
        <view class="float" @tap='toHome()'>
            <button class="float-button" hover-class="hover-btn-bg">
                <uni-icons type="home" size="30px" color="#fff" style="margin-top: -20rpx;" />
                <!-- <image class='iconfont' :src="$imgUrl+'image/onLine.png'"></image> -->
                <text class="float-text">首页</text>
            </button>

        </view>
        <!-- </z-paging> style="display: flex;justify-content: end;"-->
    </view>
</template>

<script>
    import {
        getSceneGoodsLists
    } from '@/api/mall.js'
    export default {
        components: {},
        data() {
            return {
                queryParams: {
                    // page: 1,
                    // limit: 100,
                },
                dataList: [],
                isList: true,
                Code: '',
                Banner: '',
                shareData: {},
                good1: {},
                good2: {},
                good3: {},
                good4: {},
            };
        },
        onLoad(query) {
            if (query) {
                console.log(query, "queryqueryqueryqueryquery")
                uni.setStorageSync('scenarioization', JSON.parse(decodeURIComponent(query.item)))
            }
            this.judgeLogin0(() => {
                if (query) {
                    const item = JSON.parse(decodeURIComponent(query.item)); // 解码
                    this.shareData = item
                    console.log(item, '000')
                    uni.setNavigationBarTitle({
                        title: item.title
                    })
                    this.Code = item.code
                    console.log(this.Code, 'code')
                    this.Banner = item.picture
                    if (this.Code) {
                        this.getList()
                    }
                }
            });
        },
        onShow() {
            this.judgeLogin0(() => {
                let query = uni.getStorageSync("scenarioization")
                console.log(query, "暑促123456")
                if (query) {
                    const item = query // 解码
                    this.shareData = item
                    console.log(item, '000')
                    uni.setNavigationBarTitle({
                        title: item.title
                    })
                    this.Code = item.code
                    console.log(this.Code, 'code')
                    this.Banner = item.picture
                    this.getList()
                }
            });
        },
        // #ifdef MP-WEIXIN
        onShareAppMessage() {
            return {
                title: this.shareData.title,
                imageUrl: this.Banner,
                path: '/pagesB/scenarioization/scenarioization?item=' + encodeURIComponent(JSON.stringify(this
                    .shareData))
            }
        },
        // onShareTimeline(res) {
        //     return {
        //         title: this.shareData.title,
        //         query: 'item=' + encodeURIComponent(JSON.stringify(this.shareData)),
        //         imageUrl: this.Banner,
        //     }
        // },
        // #endif
        methods: {
            getList() {
                // this.queryParams.page = page
                this.queryParams.code = this.Code
                getSceneGoodsLists(this.queryParams).then(res => {
                    if (res.code == 1) {
                        this.dataList = res.data
                        this.good1 = res.data[0]
                        this.good2 = res.data[1]
                        this.good3 = res.data[2]
                        this.good4 = res.data[3]
                        // this.$refs.paging.complete(res.data);
                    }
                }).catch(err => {
                    // this.$refs.paging.complete(false);
                })
            },
            //跳转到shouye1
            toHome() {
                uni.switchTab({
                    url: "/pages/index/index",
                });
            },
            /**
             * 商品列表点击
             */
            onGoodsList(item) {
                uni.navigateTo({
                    url: '/pagesA/mall/goodsDetails?code=' + encodeURIComponent(item.code) + "&invite=" + uni
                        .getStorageSync(
                            "invite_code") || '',
                    // animationType: 'zoom-fade-out',
                    // animationDuration: 200
                })
            }
        },
    };
</script>
<style scoped lang='scss'>
    .subTitle{
        margin-top: 10rpx;
        margin-bottom: -10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 90rpx;
        font-size: 42rpx;
        font-weight: 800;
    }
    /* 商品列表 */

    .goods-data {
        /* #ifdef APP-PLUS || MP-WEIXIN */

        /* #endif */
        // margin-top:180rpx;
        width: 100%;

        .goods-list {
            // padding: 0 25rpx;
            border-radius: 20rpx;
            overflow: hidden;
            padding: 15rpx 0;

            .list-view {
                float: left;
                width: 44%;
                padding-bottom: 30rpx;
                // height: 560rpx;
                background-color: #ffffff;
                margin: 0 0 30rpx 30rpx;
                border: 1rpx solid #efefef;
                border-radius: 10rpx;
                // margin-right: 2%;
                // margin-bottom: 30rpx;
                // overflow: hidden;

                .thumb {
                    width: 100%;
                    //   height: 60%;
                    height: 250rpx;
                    text-align: center;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    image {
                        height: 250rpx;
                    }
                }

                .item {
                    width: 100%;

                    .title {
                        padding: 20rpx;

                        text {
                            width: 100%;
                            color: #212121;
                            font-size: 26rpx;
                        }
                    }

                    .commodity-disc {
                        border-radius: 4rpx;
                        background: #efefef;
                        padding: 5rpx 20rpx;
                        font-size: 24rpx;
                        color: #7f8699;
                        text-align: left;
                        margin-left: 15rpx;
                        margin-top: 9rpx;
                    }

                    .commodity-detail {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-left: 15rpx;
                        width: 300rpx;

                        // margin-top: 18rpx;
                        .ret-yuans {
                            color: #a6a8ae;
                            font-size: 28rpx;
                            margin-left: 6rpx;
                            text-decoration: line-through;
                        }

                        .commodity-price {
                            color: #ff0000;
                            font-size: 28rpx;
                        }

                        .commodity-count {
                            color: #999999;
                            font-size: 26rpx;
                        }
                    }
                }
            }

            .descript {
                width: 40%;
                margin-left: 420rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 300rpx;
                font-size:32rpx;
                text-indent: 2em;
                font-family: "PingFang SC";
                line-height: 56rpx;
            }

            .descript0 {
                float: left;
                width: 40%;
                margin: 30rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 300rpx;
                font-size:32rpx;
                text-indent: 1em;
                /* font-family: ""; */
            }

            .list-view:nth-child(2n) {
                margin-right: 0;
            }
        }
    }
    
    .goods-data0 {
        /* #ifdef APP-PLUS || MP-WEIXIN */
    
        /* #endif */
        // margin-top:180rpx;
        width: 100%;
    
        .goods-list {
            // padding: 0 25rpx;
            border-radius: 20rpx;
            overflow: hidden;
            /* padding: 15rpx; */
            margin: 30rpx 20rpx;
            /* background:linear-gradient(to bottom, #e2dad4, #ccbcaf); */
            /* background:linear-gradient(to bottom, #d4d7e4, #cfd4e0) ; */
             background:linear-gradient(to bottom, #e3d8d2, #e2dad4) ;
            .list-view {
                float: left;
                width: 48%;
                padding-bottom: 30rpx;
                // height: 560rpx;
                background-color: #ffffff;
                margin-left: 20rpx;
                margin-top: 10rpx;
                margin-bottom: 10rpx;
                /* margin: 0 0 30rpx 30rpx; */
                border: 1rpx solid #efefef;
                border-radius: 10rpx;
                // margin-right: 2%;
                // margin-bottom: 30rpx;
                // overflow: hidden;
    
                .thumb {
                    width: 100%;
                    //   height: 60%;
                    height: 250rpx;
                    text-align: center;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    image {
                        height: 250rpx;
                    }
                }
    
                .item {
                    width: 100%;
    
                    .title {
                        padding: 20rpx;
    
                        text {
                            width: 100%;
                            color: #212121;
                            font-size: 26rpx;
                        }
                    }
    
                    .commodity-disc {
                        border-radius: 4rpx;
                        background: #efefef;
                        padding: 5rpx 20rpx;
                        font-size: 24rpx;
                        color: #7f8699;
                        text-align: left;
                        margin-left: 15rpx;
                        margin-top: 9rpx;
                    }
    
                    .commodity-detail {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-left: 15rpx;
                        width: 300rpx;
    
                        // margin-top: 18rpx;
                        .ret-yuans {
                            color: #a6a8ae;
                            font-size: 28rpx;
                            margin-left: 6rpx;
                            text-decoration: line-through;
                        }
    
                        .commodity-price {
                            color: #ff0000;
                            font-size: 28rpx;
                        }
    
                        .commodity-count {
                            color: #999999;
                            font-size: 26rpx;
                        }
                    }
                }
            }
    
            .descript {
                width: 40%;
                margin-left: 393rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 460rpx;
                font-size:32rpx;
                text-indent: 2em;
                font-family: "PingFang SC";
                line-height: 65rpx;
                letter-spacing:2rpx;
            }
    
            .descript0 {
                float: left;
                width: 40%;
                margin-left: 40rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 420rpx;
                font-size:32rpx;
                text-indent: 1em;
                line-height: 65rpx;
                letter-spacing:2rpx;
                /* font-family: ""; */
            }
    
            .list-view:nth-child(2n) {
                margin-right: 0;
            }
        }
    }

    .float {
        position: fixed;
        right: 20px;
        bottom: 120px;
        z-index: 999;

        .float-button {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: #2e996e;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.4);
            z-index: 100;
        }

        .float-text {
            // padding: 12rpx 30rpx;
            // background-color: #2e996e;
            color: #fff;
            font-size: 26rpx;
            margin-top: -60rpx;
            // border-radius: 25rpx;
            // margin-left:15rpx;
            z-index: 1000;
        }

        .hover-btn-bg {
            background-color: #3f99ab;
            color: #fff;
        }
    }

    .u-load-more-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .u-load-more-inner {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 12rpx;
    }

    /* @import "../../libs/css/style.components.scss"; */

    /* #ifdef MP */
    // 在mp.scss中，赋予了u-line为flex: 1，这里需要一个明确的长度，所以重置掉它
    // 在组件内部，把组件名(u-line)当做选择器，在微信开发工具会提示不合法，但不影响使用
    u-line {
        flex: none;
    }

    /* #endif */
</style>